<template>
  <div>
    <el-upload
      ref="upload"
      accept="video/*"
      action
      list-type="picture-card"
      :file-list="fileList"
      :http-request="upload"
      :before-upload="handleBeforeUploadVideo"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <video class="el-upload-list__item-thumbnail" :src="file.url"></video>
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>

    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <video width="100%" :src="dialogImageUrl" alt="" controls />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: [String, Array ,File, Blob],
      default() {
        return []
      },
    },
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.fileList = val
      },
      immediate: true
    }
  },
  computed: {
    /**
     * 文件格式
     */
    videoType() {
      return [
        "video/mp4",
        "video/avi",
        "video/flv",
        "video/mov",
        "video/wmv",
        "video/webm",
        "video/ogg",
      ];
    },
  },
  methods: {
    /**
     * 删除
     */
    handleRemove(file) {
      this.fileList = this.fileList.filter(({ url }) => url !== file.url)
      this.$emit('change', this.fileList)
    },
    /**
     * 预览
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    /**
     * 上传前校验类型
     */
    handleBeforeUploadVideo({ type }) {
      const isVideo = this.videoType.includes(type);

      if (!isVideo) this.$message.warning("仅支持视频文件 上传");

      return isVideo;
    },
    /**
     * 上传
     */
    async upload(event) {
      // this.progressFlag = true;

      try {
        const formData = new window.FormData();
        formData.append("file", event.file);

        const { data } = await axios({
          method: "POST",
          url: "/upload/uploadImage",
          data: formData,
          timeout: 30000,
          headers: { "Content-Type": "multipart/form-data" },
        });
        if (data?.code == 0 && data?.data) {
          const name = event.file.name;
          const url = data.data;
          this.fileList.push({ name, url });
          this.$emit('change', this.fileList)
        }
      } finally {
        // this.progressFlag = false;
      }
    },
  },
};
</script>
